<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
</head>
<body>
    
    <script>
        /*
            原生ajax: XMLHttpRequest对象的属性
                readyState:
                            0 -- 请求未初始化
                            1 -- 服务器连接已建立
                            2 -- 请求已收到
                            3 -- 正在处理请求
                            4 -- 请求已完成且响应已就绪

                onreadystatechange: readyState属性发生变化时被调用的函数，会被调用4次

                status: HTTP状态码
        */
        /*
        跨域
            ajax注定会有跨域的问题
        不会跨域：
            <a href="地址"></a>    // 这属于页面跳转
            地址栏直接写地址        // 属于页面跳转
            <img src="" alt="" />
            <link rel="stylesheet" href="./ss.css" />
            <script type="text/javascript" src="" />

        跨域解决方案
            超链接可以做到跨域，但点击后会跳转页面，无法做到页面局部刷新效果
            cors解决跨域（后台设置头部， ajax请求时）
            jsonp解决跨域（只支持get请求， 跟ajax没关系）
            代理机制
        */
    </script>
    <!-- 
        jsonp解决跨域
            script标签是可以解决跨域的，src属性可以是 js 文件，那这个路径可以是一个servlet路径
            <script type="text/javascript" src="http://localhost:8081/b/jsonp" />
            当src是一个servlet请求时，后台回接收到的，会返回数据，这个数据可以是 字符串、标签、方法名、函数名，可以直接写到页面上
            // out = response.getWriter()  // java的servlet代码
            // out.print("hello lisi!")
            // out.print("<h1>hello</h1>")
            // out.print("{\"name\": \"lisi\"}")
            // out.print("doSome()")
            当后台返回是一个函数名 doSome() 时，前端可以写一个这个函数, 就会直接被调用
            // out.print("doSome({\"name\": \"lisi\"})")
            当后台返回带参数的 doSome() 时，前端这个函数, 会接收到这个数据
    -->
    <!-- <script>
        function doSome(data) {
            // alert('hello')
            alert('hello' + data.name)
        }
    </script> -->
    <!-- 如此这样，这个脚本里会接收到后台的返回 -->
    <!-- out.print("doSome({\"name\": \"lisi\"})") -->
    <!-- <script type="text/javascript" src="http://localhost:8081/b/jsonp">
        // 后台的返回会写到这里
        doSome({"name": "lisi"})
    </script> -->
    <!-- 如果前端自己确定函数名, 需要前端将自己写的函数名告诉后台，后台就会动态的获取到函数名 -->
    <!-- 
        这样，后台会解析 ? 后台的参数
        // funName = response.getParameter("fun")
        // out.print(funName + "({\"name\": \"lisi\"})")
        <script type="text/javascript" src="http://localhost:8081/b/jsonp?fun=doSome">
            doSome({"name": "lisi"})
        </script> 
    -->

    <!-- 
        jsonp方式达到局部刷新页面的效果, 点击按钮获取后台数据
        <button id="btn">点击进行局部刷新</button>
        <div id="divId"></div>
        <script>
            function doSome(data) {
                document.getElementById('divId').innerHTML=data.name
            }
            window.onload = () => {
                document.getElementById('btn').onclick = () => {
                    // 加载script元素
                    // 创建script元素对象
                    const htmlScriptElement = document.createElement("script")
                    // 设置script的属性
                    htmlScriptElement.type = "text/javascript"
                    htmlScriptElement.src = "http://localhost:8081/b/jsonp?fun=doSome"
                    // script对象添加到body中，加载script标签
                    document.getElementsByTagName('body')[0].appendChild(htmlScriptElement)
                }
            }
        </script>
    -->
    <!-- 
        juqery的ajax方式封装 jsonp
        <button id="btn">点击进行局部刷新</button>
        <div id="divId"></div>
        <script>
            function doSome(data) {
                document.getElementById('divId').innerHTML=data.name
            }
            $(function() {
                $('#btn').click(function() {
                    // 发送所谓的ajax请求（其实本质上并不是一个ajax请求，只是被着ajax的皮）
                    $.ajax({
                        type: 'get',  // jsonp请求只能是get
                        url: 'http://localhost:8081/b/jsonp',
                        dataType: 'jsonp',        // 指定数据类型是jsonp形式【最关键】
                        // 当不配置传递的参数名时，发送的请求时这样的：/b/jsonp?callback=jQuery360050825331485699_1690528968612&_=1690528968613
                        // 所以后台收到的键值对是 callback=jQuery360050825331485699_1690528968612
                        // 默认的   键： callback （相当于fun）  值：jQuery360050825331485699_1690528968612 ， 这是jquery自己生成的, （相当于 doSome）
                        // jsonp: 'fun',      // 设置传递的参数名， (后台接口提供), 设置后不采用默认的参数名 callback 了
                        // jsonpCallback: function(data) {   // 当设置了jsonp的返回时，不需要用success接收了
                        //     $('#divId').html(data.name)
                        // }
                        jsonpCallback: "doSome",              // 也可以这样
                        // success: function(data) {
                        //    $('#divId').html(data.name)
                        // }
                    })
                })
            })
        </script>
    -->
</body>
</html>